<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <!-- <view class="checkedInDay">连续签到7天奖励</view>
                <view class="mysteryBoxProgress">
                    <view >
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/mysteryBox.png" alt="" style="width:100%; height:auto" mode="widthFix" />
                    </view>
                    <view></view>
                </view> -->
    
                <template v-if="params.pageSign=='recharge'">
                    <!-- 余额 -->
                    <view class="rechargeWay">
                        <view class="rechargeWay-label">充值方式</view>
                        <view class="rechargeWay-content"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/wechatIcon0114.png" alt="" style="width: 44rpx; height: 44rpx;"> <span>微信支付</span> </view>
                    </view>
                    <!-- 可提现 -->
                    <view class="rechargeNum">
                        <view class="rechargeNum-label">充值金额</view>
                        <view class="rechargeNum-content">￥
                            <van-field class="uni-input"  focus placeholder="请输入金额" @change="changeName"
                                placeholder-style="color:#888888; font-size:30rpx;" hold-keyboard="true"
                                custom-style="color:#111111; font-size:14px;" :value="money"
                                :border="noBorder" />
                        </view>
                    </view>
                </template>
                <template v-else>
                    <!-- 余额 -->
                    <view class="rechargeWay">
                        <view class="rechargeWay-label">提现至</view>
                        <view class="rechargeWay-content"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/wechatIcon0114.png" alt="" style="width: 44rpx; height: 44rpx;"> <span>提现至微信</span> </view>
                    </view>
                    <!-- 可提现 -->
                    <view class="rechargeNum">
                        <view class="rechargeNum-label">提现金额</view>
                        <view class="rechargeNum-content">￥
                            <van-field class="uni-input"  focus placeholder="请输入金额" @change="changeName"
                                placeholder-style="color:#888888; font-size:30rpx;" hold-keyboard="true"
                                custom-style="color:#111111; font-size:14px;" :value="money"
                                :border="noBorder" />
                        </view>
                    </view>
                    <!-- 提现提示 -->
                    <view class="withdraw-tips">今日可提现￥100.00,全部提现</view>
                </template>
                <view class="tips">
                    单笔充值限额5000元，单日累计不超过5000元，单月累计不超过999999元；
                </view>
     
                <!-- 记录 -->
                <!-- <view class="myScoreDetail">
                    <view class="myScoreDetail_title "  @tap="showPopup"> <span class="r16">余额明细</span>  <van-icon name="arrow-down"  :style="textColor" /></view>
                    <view class="myScoreDetail_content" v-if="scoreList.length>0">
                        <view class="detailBox" v-for="(item,index) in scoreList" :key="index">
                            <view class="detailBox_left">
                                <view class="left_top">{{item.title}} </view>
                                <view class="left_bottom">{{item.des}}</view>
                            </view>
                            <view class="detailBox_right">{{item.status==='add' ? '+' :'-'}}{{item.num}}</view>
                        </view>
                    </view>
                </view> -->
            </view>

        </scroll-view>
        <!-- 按钮区域 -->
        <view class="btnArea">
            <button plain class="checkBtn" open-type="share" @tap="toRecharge" v-if="params.pageSign=='recharge'">确认充值</button>
            <button plain class="checkBtn" open-type="share" @tap="toRecharge" v-else>确认提现</button>
        </view>
    </view>
</template>

<script>
export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '余额充值',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            money:undefined,
            noBorder:false,
            params:undefined,
            scoreList:[
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                },
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                },
                {
                    title:'幸运积分好礼',
                    des:'乐生活 | 2024/11/05  15:20:30',
                    num:'20',
                    status:'add'
                }                
            ],

        }
    },
    onLoad(data) {
       // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log('params', this.params)
            if(this.params.pageSign=='recharge'){
                this.navBarTitle='余额充值'
            }else{
                this.navBarTitle='余额提现'
            }
        }
    },
    onReady(){

    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 显示积分类型
        showPopup(){
            this.showScorePopup=true
        },
        // 关闭
        closePopup(){
            this.showScorePopup=false
        },
        // 弹窗内点击事件
        onClickPopup(index,e){
            console.log(index,e,'弹窗内点击事件')
            this.curPopup=index
            this.swiperTabsCurrent = index    //页面顶部的tab
            this.textColor="color:#ff6203"
        },
        // 弹窗里确认
        confirmFilter(){
            this.showScorePopup=false
        },
        // 去充值哦
        toRecharge(){
            uni.navigateTo({
				url: '/pages/minePage/rechargePage'
			})
        }
    }
}
</script>

<style lang="scss" scoped>

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.mysteryBoxProgress{
    border-bottom:1px solid #f0f0f0;
}
.recordList{
    display:flex;
}
// 余额
.rechargeWay{
    padding-top:76rpx ;
    padding-bottom: 48rpx;
    border-bottom: 1px solid #f0f0f0;

    .rechargeWay-label{
        font-size: 38rpx;
        line-height: 38rpx;
        text-align: left;
        color: #333333;
    }
    .rechargeWay-content{
        margin-top: 72rpx;
        font-size: 56rpx;
        line-height: 56rpx;
        text-align: left;
        color: #333333;
        display: flex;
        align-items: center;

        span{
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: left;
            color: #111111;
            margin-left: 24rpx;
        }
    }
}
// 可提现
.rechargeNum{
    padding-top:76rpx ;
    padding-bottom: 48rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .rechargeNum-label{
        font-size: 38rpx;
        line-height: 38rpx;
        text-align: left;
        color: #333333;  
    }
    .rechargeNum-content{
        margin-top: 72rpx;
        font-size: 40rpx;
        line-height: 40rpx;
        text-align: left;
        color: #888888;
        display: flex;
        align-items: center;
    }
}
// 提现提示
.withdraw-tips{
    font-size: 24rpx;
    color: #888888;
    line-height: 24rpx;
    margin-top: 46rpx;
}
// 提示
.tips{
    color: #111111;
    font-size: 24rpx;
    text-align: left;
    margin-top: 46rpx;
}
// 按钮区域
.btnArea{
    position: fixed;
    bottom: 0;
    width: calc(100% - 96rpx);
    padding: 0rpx 48rpx;
    // padding-top: 50rpx;
    // padding-bottom: 32rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    z-index: 100;
}


.button{
    background-color: #Ffffff;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #111111;
    height: 86rpx;
    line-height: 86rpx;
    border: 1px solid #D4D4D4 !important;
    padding-left:120rpx;
    padding-right:120rpx;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    padding-left: 120rpx;
    padding-right: 120rpx;
}
button{
    border: none;
}
button[plain]{
    border:none;
}
.myScoreDetail{
    padding: 50rpx 0rpx;
    .myScoreDetail_title{
        font-size: 26rpx;
        line-height: 26rpx;
        text-align: left;
        color: #111111;
    }
    .myScoreDetail_content{
        margin-top: 62rpx;
    }
}
.detailBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70rpx;

    .detailBox_left{
        .left_top{
            font-size: 26rpx;
            line-height: 26rpx;
            color: #111111;
        }
        .left_bottom{
            margin-top: 22rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #666666;
        }
    }
    .detailBox_right{
        font-size: 26rpx;
        line-height: 26rpx;
        color: #111111;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent !important;
    background: transparent !important;
}
::v-deep .van-nav-bar__content{
    background-color: transparent !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell{
    padding: 0px !important;
    border-bottom: none;
}

.r16{
    margin-right:16rpx
}

</style>
